<template>
	<view class="indexBlock">
		<!-- 首页头像登录 -->
		<view class="indexTop">
			<view class="indexTopView" @click="goLogin">
				<!-- 顶部登录头像 -->
				<view class="indexTopLeft">
					<image class="loginAvatar"v-if="isAuth"  :src="userInfo.headUrl"></image>
					<image class="loginAvatar" v-else  src="@/static/index/loginAvatar.png"></image>
				</view>
				<!-- 顶部登录文字，登录成功文字 -->
				<view class="indexTopRight" v-if="isAuth">
					<p  class="loginText">{{userInfo.realName}}</p>
				</view>
				<view class="indexTopRight" v-else>
					<p  class="loginText">登录/注册</p>
				</view>
			</view>
		</view>
		<view class="midiumAndBottom">
			<!-- 首页中部与我有关合同状态 -->
			<view class="indexMidium">
				<view class="midiumLeft">
					<view class="midiumLeftTop">
						<view class="midiumTopNumber">{{operatedByMeNum}}</view>
						<view class="midiumTopText">待我签署</view>
					</view>
				</view>
				
				<view class="midiumRight">
					<view class="midiumRightTop">
						<view class="midiumRightTopNumber">{{operatedByOtherNum}}</view>
						<view class="midiumRightTopText">待人操作</view>
					</view>
				</view>
			</view>
			<!-- 首页底部合同详情 -->
			<view class="indexBottom">
				<view class="indexTitle">
					<p>待我签署合同</p>
				</view>
				
				<!-- 合同项 -->
				<view class="DataList">
					<view class="contractItem" v-for="(item, index) in contractForm" v-show="isHaveContract">
					<!-- <view class="contractItem" v-for="(item, index) in contractForm" v-if="isHaveContract"> -->
						<navigator class="text-link" hover-class="none" url="/pages/contract/contract">
						<view class="contractLeft">
							<image class="contractItemImage" src="@/static/index/contractItem.png"></image>
						</view>
						<view class="contractRight">
							<view class="contractRightTop">
								<view class="contractText">{{item.contractName}}</view>
								<view class="contractStatus">
									<uni-tag text="签署中" type="warning" />
									
								</view>
							</view>
							<view class="contractRightBottom">
								<view class="contractPeople">发起人：{{item.creatorUser}}</view>
								<view class="contractTime">截止时间：{{item.contractDeadline}}</view>
							</view>
						</view>
						</navigator>
					</view>
					<view class="noData" v-show="!isHaveContract">
					<!-- <view class="noData" v-else> -->
						<image class="noDataImg" src="../../static/noData.png"></image>
						<view>暂无合同</view>
					</view>
				</view>
				
				
			
			</view>
			
		</view>
		
	</view>

</template>

<script>
	import {mapState} from 'vuex'
	import isEmpty from '../../utils/someUtils.js'
	export default {
		data() {
			return {
				dataForm: {
				    id: "",
				    flag: "operated-by-me",
				},
				// 待我签署合同数量
				operatedByMeNum: 0,
				// 待他人签署合同数量
				operatedByOtherNum: 0,	 
				// 待我签署合同数组信息
				contractForm: [],
				// 待我签署数据状态
				isHaveContract: false
			}
	
		},
		created() {
			this.getOperatedByMeNum()
			this.getOperatedByOtherNum()
			this.getContractInforMation()
		},
		computed: {
			...mapState(['isAuth', 'userInfo'])
		},
		mounted() {
			
			// if (this.contractForm.length != 0) {
			// 	setTimeout(() => {
			// 		this.isHaveContract = true
			// 	}, 100)
			// } else {
			// 	setTimeout(() => {
			// 		this.isHaveContract = false
			// 	}, 100)
			// }
			
			  
			
		},
		// watch: {
		// 	//监听 username 值的变化
		//     //newVal 是变化之后的值，oldVal 是变化之前的值
		// 	contractForm:function(newV, oldV) {
		// 		console.log('newV',newV)
		// 		console.log(oldV)
		// 		if (newV.length===0) {
		// 				// 如果数组对象为空
		// 				this.isHaveContract = false 
		// 			}else {
		// 				this.isHaveContract = true
		// 			}
		// 		}
				
		// },
		methods: {
		onChange(event) {
		    // event.detail 的值为当前选中项的索引
		    this.setData({ active: event.detail });
		},
		// 跳转到登录页
		goLogin() {
			uni.navigateTo({
				url: '/pages/login/login',
			}); 
		},
		// 获取待我签署文档数量
		async getOperatedByMeNum() {
			let approvalStatus = 3
			const response = await this.$api.index.getContractNum(approvalStatus);
			this.operatedByMeNum = response.data.data
		},
		// 获取待他人签署文档数量
		async getOperatedByOtherNum() {
			// 这里随便定义的一个状态，在后台判断的逻辑是else里面的
			let approvalStatus = 9
			const response = await this.$api.index.getContractNum(approvalStatus);
			console.log('数据结果', response)
			this.operatedByOtherNum = response.data.data
		},
		
		// 获取待我签署的文件合同信息
		async getContractInforMation() {
			// 
			let dataForm = this.dataForm
			const response =  await this.$api.index.getContractByMe(dataForm);
			console.log('数据结果', response)
			let contractForm = response.data.data.list
			// console.log(isEmpty(contractForm))
			if (contractForm.length===0) {
				// 如果数组对象为空
				this.isHaveContract = false 
				this.contractForm = {}
			} else {
				this.isHaveContract = true
				this.contractForm = response.data.data.list
			}
			console.log("是否有数据", this.isHaveContract)
			
		},
		}
	}
</script>

<style>
	.noData {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 32rpx;
		color: #757575;
	}
	.noDataImg {
		width: 400rpx;
		height: 300rpx;
	}
	.DataList {
		width: 750rpx;
	}
	.indexTop {
		width: 750rpx;
		height: 150rpx;
		background-color: #ffffff;
		margin-bottom: 30rpx;
	}
	.indexTop .indexTopView {
		display: flex;
		box-sizing: border-box;
		width: 750rpx;
		height: 150rpx;
		padding: 20rpx 20rpx;
		
	}
	.indexTop .indexTopView .indexTopLeft {
		width: 130rpx;
		height: 110rpx;
	}
	.loginAvatar {
		padding: 10rpx 10rpx;
		width: 90rpx;
		height: 90rpx;
	}
	.indexTop .indexTopView  .indexTopRight {
		display: flex;
		align-items: center;
		width: 400rpx;
		height: 110rpx;
		font-size: 34rpx;
		color: #000000;
		font-weight: 600;
	}
	.midiumAndBottom {
		margin: 0 auto;
		width: 710rpx;
		height: 1200rpx;
	}
	.indexMidium {
		display: flex;
		width: 710rpx;
		height: 300rpx;
	}
	.indexMidium .midiumLeft {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 50rpx;
		width: 355rpx;
		height: 300rpx;
		background-color: #ffffff;
		border-right: 1px solid #dddddd;
	}
	.indexMidium .midiumRight {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 50rpx;
		width: 355rpx;
		height: 300rpx;
		background-color: #ffffff;
	}
	.midiumLeftTop {
		text-align: center;
	}
	.midiumTopNumber {
		font-size: 60rpx;
		color: blue;
		margin-bottom: 20rpx;
	}
	.midiumTopText {
		font-size: 26rpx;
	}
	.midiumRightTop {
		text-align: center;
	}
		
	.midiumRightTopNumber {
		font-size: 60rpx;
		color: #e60000;
		margin-bottom: 20rpx;
	}
	
	.indexBottom {
		margin-top: 20rpx;
		width: 710rpx;
	}
	
	.indexTitle {
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 36rpx;
		font-weight: 600;
	}
	.contractItem {
		display: flex;
		box-sizing: border-box;
		padding: 20rpx;
		width: 710rpx;
		height: 220rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
	.contractItem .contractLeft {
		display: flex;
		align-items: center;
		width: 120rpx;
		height: 180rpx;

	}
	.text-link {
		display: flex;
	}
	.contractItemImage {
		padding: 10rpx;
		width: 90rpx;
		height: 90rpx;
	}
	
	.contractItem .contractRight {
		width: 550rpx;
		height: 180rpx;

	}
	.contractItem .contractRight .contractRightTop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 550rpx;
		height: 90rpx;

	}
	.contractText {
		font-size: 34rpx;
	}
	.contractStatus {
		font-size: 30rpx;
		font-weight: 600;
	}
	.contractItem .contractRight .contractRightBottom {
		display: flex;
		flex-direction: column;
		width: 550rpx;
		height: 70rpx;

	}
	.contractPeople {
		font-size: 26rpx;
		color: #646464;
	}
	.contractTime {
		font-size: 26rpx;
		color: #646464;
	}
</style>